/**
 * react lazy使用路由懒加载
 * Suspense 路由加载会有等待 配置等待的空白页面
**/
import { lazy, Suspense } from 'react'

import { Navigate } from 'react-router-dom'
// 导入入口组件 整个项目的入口页面组件
import App from '../App'
import { Spin } from 'antd';
// 通过路径名导入 
export const lazyLoad = (moduleName: string) => {

    // 动态导入模块
    const Module = lazy(() => import(/* @vite-ignore */`../pages${moduleName}`))
    // Suspense 路由加载会有等待 fallback属性 配置等待的空白页面         
    return <Suspense fallback={<Spin></Spin>}><Module /></Suspense>  // 返回懒加载的模块组件
}
// 定义静态路由数组
// 比如lazyLoad('home') =>../pages/home.tsx
// 首先被定义的 组件页面必须export default 导出 
export const routes: RouteObject[] = [
    {
        path: '/',
        element: <App></App>,
        children: [
            {
                path: '/',
                element: <Navigate to='/home'></Navigate>
            },
            {
                path: '/home',
                element: lazyLoad('/home'),
            }, {
                path: '/detail',
                element: lazyLoad('/detail/index'),
            },
        ],
    }
]
